<template>
  <div class="map-info">
    <div class="mapBox">
      <div style="width: 100%; height: 100%">
        <div
          class="pointContent"
          v-for="item in pointList"
          :key="item.id"
          :style="item.style"
          @click="selectLocationIdFun(item)"
        >
          <point-offline
            :select="item.id == deviceId ? true : false"
            v-if="item.state == 'OFFLINE'"
          ></point-offline>
          <point-err
            :select="item.id == deviceId ? true : false"
            v-if="item.state != 'OFFLINE'&&item.alert"
          ></point-err>
          <point-no-err
            :select="item.id == deviceId ? true : false"
            v-if="item.state != 'OFFLINE'&&!item.alert"
          ></point-no-err>

          <div :class="item.state == 'OFFLINE' ? 'offline' :item.alert == false ?'noerr':'err'" class="locationName_cur" ref="TheStyle" v-show="item.id == deviceId ? true : false">
            <div>{{ item.code }}</div>
          </div>
          <div :class="item.state == 'OFFLINE' ? 'offline' :item.alert == false ?'noerr':'err'" class="locationName" ref="TheStyle" v-show="item.id != deviceId ? true : false">
            <div>{{ item.code }}</div>
          </div>
        </div>
      </div>
      <img src="@/assets/images/warnView/device/jiangsu_device.png" style="width: 100%" />
    </div>
  </div>
</template>

<script>
import pointErr from "./pointErr";
import pointNoErr from "./pointNoErr";
import pointOffline from "./pointOffline";
// import { locationAlertStatus } from "@/api/index";
// import store from "@/store";
// import { hospitalMapPoint } from "@/utils/globalData";
export default {
  props: {
    msg: String,
    deviceId: String,
    allDeviceData: Array
  },
  components: {
    pointErr,
    pointNoErr,
    pointOffline
  },
  watch: {
    allDeviceData: {
      deep: true,
      handler(newVal, oldVal) {
        for (let i = 0; i < this.allDeviceData.length; i++) {
          const alertEl = this.allDeviceData[i];
          for (let j = 0; j < this.pointList.length; j++) {
            const pointEl = this.pointList[j];
            if (alertEl.deviceId == pointEl.id) {
              this.pointList[j].alert = alertEl.alert;
              this.pointList[j].state = alertEl.state;
            }
          }
        }
      }
    }
  },
  mounted() {
    // this.current = this.$store.state.currentHospital;
    this.pointList = [
      {
        style: "left:49.5%;top:48.6%",
        id: "22453",
        code: "LH-1",
        name: "22453",
        alert: false,
        state: "ONLINE"
      },
      {
        style: "left:68.5%;top:13.5%",
        id: "23785",
        code: "LH-2",
        name: "23785",
        alert: false,
        state: "ONLINE"
      },
      {
        style: "left:79.6%;top:3.5%",
        id: "37444",
        code: "LH-5",
        name: "37444",
        alert: false,
        state: "ONLINE"
      },
      {
        style: "left:86.7%;top:33%",
        id: "30887",
        code: "LH-6",
        name: "30887",
        alert: false,
        state: "ONLINE"
      },
      {
        style: "left:79.6%;top:61.9%",
        id: "24270",
        code: "LH-7",
        name: "24270",
        alert: false,
        state: "ONLINE"
      },
      {
        style: "left:86.8%;top:86.8%",
        id: "51829",
        code: "LH-8",
        name: "51829",
        alert: false,
        state: "ONLINE"
      },
      {
        style: "left:63%;top:83%",
        id: "28997",
        code: "LH-9",
        name: "28997",
        alert: false,
        state: "ONLINE"
      },
      {
        style: "left:54.3%;top:90.5%",
        id: "26034",
        code: "LH-10",
        name: "26034",
        alert: false,
        state: "ONLINE"
      },
      {
        style: "left:34.4%;top:90.5%",
        id: "23766",
        code: "LH-11",
        name: "23766",
        alert: false,
        state: "ONLINE"
      },
      {
        style: "left:10.2%;top:86.9%",
        id: "33005",
        code: "LH-12",
        name: "33005",
        alert: false,
        state: "ONLINE"
      },
      {
        style: "left:3.7%;top:80.9%",
        id: "21894",
        code: "LH-13",
        name: "21894",
        alert: false,
        state: "ONLINE"
      },
      {
        style: "left:18.3%;top:9.5%",
        id: "42543",
        code: "LH-15",
        name: "42543",
        alert: false,
        state: "ONLINE"
      },
      {
        style: "left:31.8%;top:54.5%",
        id: "29194",
        code: "LH-16",
        name: "29194",
        alert: false,
        state: "ONLINE"
      },
      {
        style: "left:6.7%;top:13.8%",
        id: "73121",
        code: "LH-17",
        name: "73121",
        alert: false,
        state: "ONLINE"
      },
      {
        style: "left:8.2%;top:56.4%",
        id: "74145",
        code: "LH-18",
        name: "74145",
        alert: false,
        state: "ONLINE"
      }
    ];

    // locationAlertStatus().then(res => {
    //   var data = res.data;
    //   this.$emit("warningNumFun", data.alertAmount);
    //   this.$emit("deviceNumFun", data.deviceAmount);
    //   for (let i = 0; i < this.pointList.length; i++) {
    //     if (data.normals.indexOf(this.pointList[i].id) != -1) {
    //       this.pointList[i].alert = 1; //正常
    //     } else if (data.alerts.indexOf(this.pointList[i].id) != -1) {
    //       this.pointList[i].alert = 2; //预警
    //     } else if (data.offLine.indexOf(this.pointList[i].id) != -1) {
    //       this.pointList[i].alert = 0; //离线
    //     } else {
    //       this.pointList[i].alert = 0; //未知
    //     }
    //   }
    // });
  },
  data() {
    return {
      pointList: []
    };
  },
  methods: {
    selectLocationIdFun(item) {
      this.$emit("selectLocationIdFun", item);
    }
  }
};
</script>

<style scoped>
</style>
